<template>
  <div>
    <!-- <h1>这是购物车组件</h1>
    <h1><router-link to="/orderconfirm">跳去订单确认页</router-link></h1> -->
    <!-- 1.头部  -->
    <div class="cart-header">
      <div class="header-icon">
        <img src="../assets/imgs/logo-mi.png" alt="" />
      </div>
      <span class="header-title"> 我的购物车 </span>
      <span class="header-desc">
        温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
      </span>
    </div>
    <!-- 2.中间 -->
    <div class="container">
      <!-- 商品的展示 -->
      <div class="cart-list">
        <ul class="list-head">
          <li class="head-choice">
            <el-checkbox v-model="allChecked" @change="toggleAll"
              >全选</el-checkbox
            >
          </li>
          <li class="head-name">商品名称</li>
          <li class="head-single">单价</li>
          <li class="head-num">数量</li>
          <li class="head-sum">小计</li>
          <li class="head-option">操作</li>
        </ul>
        <ul class="list-container" v-for="item in list" :key="item.id">
          <li class="head-choice">
            <el-checkbox v-model="item.checked" @change="handleChecked(item)"
              >单选</el-checkbox
            >
          </li>
          <li class="head-name">
            <div class="item-img">
              <img v-lazy="item.s_good.s_goods_photos[0].path" alt="" />
            </div>
            <div>
              {{ item.s_good.name }}
            </div>
          </li>
          <li class="head-single">
            {{ item.s_good.price }}
          </li>
          <li class="head-num">
            <el-input-number
              v-model="item.num"
              @change="handleChange(item.id, item.num)"
              :min="1"
            ></el-input-number>
          </li>
          <li class="head-sum">{{ item.num * item.s_good.price }}</li>
          <li
            class="iconfont head-option"
            @click="del(item.id)"
            style="font-size: 20px; color: red"
          >
            &#xe61a; 删除
          </li>
          <!-- 敏感操作我们通常情况下就会弹个弹窗出来，询问用户是否继续当前操作 
          可以用自己原生vue写的，也可以用ui框架的提示框-->
        </ul>
      </div>
      <!-- 商品的操作 -->
      <div class="cart-msg">
        <div class="msg-left">
          <span
            >共<span class="toyellow">{{ list.length }}</span
            >件商品</span
          >
          <!-- 选择了多少件是根据当前有多少个单选选择的数量 都是对list某个属性有某种依赖关系-->
          <span
            >选择了<span class="toyellow">{{ sum.total }}</span
            >件商品</span
          >
        </div>
        <div class="msg-right">
          <!-- 累加出勾选了单选框的商品的价格 都是对list某个元素 某个属性有某种依赖关系-->
          合计<span class="toyellow">{{ sum.totalPrice }}</span> 元
          <el-button>去结算</el-button>
        </div>
      </div>
    </div>
    <!-- 3.底部 -->
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import NavFooter from "@/components/NavFooter";
import { getCart, updateCart, delCart } from "../assets/request";
export default {
  components: {
    "nav-footer": NavFooter,
  },
  data() {
    return {
      list: [], //购物车数据列表
      checked: true,
      allChecked: true,
    };
  },
  methods: {
    async handleChange(id, num) {
      //计数器中的回调函数的参数 是计数更新之后的数据，注意不是原来v-model绑定的数据
      //用来获取更新之后的数据
      console.log(num, "这是num");
      await updateCart(id, { num });
    },
    del(id) {
      //先弹出弹窗
      this.$confirm("确定要删除这个商品嘛？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delCart(id);
          console.log(this.list);
          //删除了数据库中的数据，但是页面没有实时渲染出数据
          //所以我们要在这里再次请求一次购物车的数据
          this.list = await getCart({
            project_id: 109,
          });
          this.list.forEach((element) => {
            this.$set(element, "checked", true);
          });
          this.$message({
            type: "success",
            message: "成功删除",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    handleChecked(item) {
      console.log(item, "12345646");
      //获取已经改变checked属性的那个对象
      //我们按下某个checkbox触发的一个回调函数
      /* 
      v-model已经帮我们修改了checked属性值
      并没有和全选做挂钩
      思路：
      当有一个单选没有选择的时候，全选是false
      当所有单选选择之后，全选是true
      */
      this.allChecked = this.list.every((ele) => ele.checked);
    },
    toggleAll() {
      //循环的给每个ele中的checked赋值即可，当前修改后的allcheck
      this.list.forEach((ele) => {
        ele.checked = this.allChecked;
      });
    },
  },
  async created() {
    this.list = await getCart({
      project_id: 109,
    });

    //数组的 每一个元素 对应的是每一个商品
    //请求后台回来的数据中并没有 checked或者selected 类似这样的属性让我们前端渲染的时候来判断该商品是否已经被选择
    //因此我们要手动添加这个新属性
    //动态添加新属性到一个已经声明到data的某个变量时，我们要用$set() 否则 数据是无法更新到视图的
    this.list.forEach((element) => {
      this.$set(element, "checked", true);
    });
    //多了一个checked属性 来控制 单选框是否被选择
    console.log(this.list);
  },
  computed: {
    sum() {
      let total = this.list.filter((ele) => ele.checked); //选择的商品 返回的每个元素中属性checked为true的新数组
      let totalPrice = total.reduce(
        (sum, ele) => (sum += ele.num * ele.s_good.price),
        0
      ); //选择商品的总价
      //要的是新数组的total累加 reduce
      return { total: total.length, totalPrice };
      //属性名为total 属性值是total.length
    },
  },
};
</script>

<style lang="scss" scoped>
.cart-header {
  width: 1226px;
  height: 112px;

  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
  .header-icon {
    width: 52px;
    height: 52px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .header-title {
    width: 142px;
    height: 60px;
    font-family: FZLTHJW--GB1-0;
    font-size: 28px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 60px;
    letter-spacing: 0px;
    color: #333333;
  }
  .header-desc {
    width: 402px;
    height: 60px;
    font-family: PingFangSC-Light;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 60px;
    letter-spacing: 0px;
    color: #999999;
    margin-left: -30px;
  }
}
.container {
  width: 1226px;
  height: 460px;
  margin: 0 auto;
  // background-color: skyblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .cart-list {
    width: 100%;
    margin: 0 auto;
    .list-head,
    .list-container {
      width: 1226px;
      height: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .head-choice,
      .head-single,
      .head-name,
      .head-num,
      .head-sum,
      .head-option {
        width: 200px;

        font-size: 18px;
        font-weight: bold;
        font-stretch: normal;
      }

      .head-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .item-img {
          width: 80px;
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    .list-container {
      border-top: 1px gray solid;
    }
  }
  .cart-msg {
    width: 1226px;
    // background-color: yellow;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .msg-left,
    .msg-right {
      font-size: 18px;
      font-weight: bold;
      font-stretch: normal;
      .toyellow {
        color: #ff6600;
      }
      button {
        width: 202px;
        height: 50px;
        background-color: #ff6600;
        font-size: 18px;
        font-weight: bold;
        font-stretch: normal;
        color: white;
      }
    }
  }
}
</style>